<html>
<head>
    <meta charset="utf-8">

    <!-- jQuery -->
    <script type="text/javascript" src="../../lib/jquery-2.1.0/jquery-2.1.0.min.js"></script>

    <!-- Handlebars -->
    <script type="text/javascript" src="../../lib/handlebars/handlebars.js"></script>

    <!-- Alpaca -->
    <script type="text/javascript" src="../../../components/alpaca/alpaca.js"></script>
    <link type="text/css" href="../../../components/alpaca/alpaca.css" rel="stylesheet"/>
    <link type="text/css" href="../../../components/alpaca/alpaca-jqueryui.css" rel="stylesheet"/>

    <!-- jQuery UI Support -->
    <script type="text/javascript" src="../../../lib/jquery-ui-latest/jquery-ui-latest.custom.min.js"></script>
    <link type="text/css" href="../../../lib/jquery-ui-latest/jquery-ui-latest.custom.css" rel="stylesheet"/>

    <!-- Additional CSS -->
    <link type="text/css" href="../../css/960.fluid.css" rel="stylesheet"/>

    <!-- Web Site -->
    <script type="text/javascript" src="../../lib/google-code-prettify/prettify.min.js"></script>
    <script type="text/javascript" src="../../js/themeswitchertool.js"></script>
    <script type="text/javascript" src="../../js/example.js"></script>
    <script type="text/javascript" src="../../js/footer.js"></script>
    <link type="text/css" href="../../css/site.css" rel="stylesheet"/>
    <link type="text/css" href="../../lib/google-code-prettify/prettify.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../lib/tweet/jquery.tweet.js"></script>
    <link type="text/css" href="../../lib/tweet/jquery.tweet.css" rel="stylesheet"/>

    <script type="text/javascript" src="https://use.typekit.com/fnm3kpm.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>



    <script type="text/javascript" src="js-yaml.js"></script>
    <script type="text/javascript" src="json2yaml.js"></script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.8.0/build/cssreset/reset-min.css&amp;3.8.0/build/cssfonts/fonts-min.css&amp;3.8.0/build/cssbase/base-min.css">
    <script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
    <title>YAML view example</title>
</head>
<body class="yui3-skin-sam">
<!-- styles for the modalTextArea -->
<style type="text/css">
.yui3-panel {
    outline: none;
}
.yui3-panel-content .yui3-widget-hd {
    font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
    padding: 15px;
}
.yui3-panel-content label {
    margin-right: 30px;
}
.yui3-panel-content fieldset {
    border: none;
    padding: 0;
}
.yui3-panel-content input[type="text"] {
    border: none;
    border: 1px solid #ccc;
    padding: 3px 7px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 100%;
    width: 200px;
}


</style>


<!-- div for modal textarea -->
<div id="modalTextAreaPanelContent" style="display: none;">
    <div class="yui3-widget-bd">
        <form>
            <fieldset>
                <p>
		    <textarea id="modalTextAreaPanelYAML" style="width: 400px; height: 300px; font-family: courier;"></textarea>
                </p>
            </fieldset>
        </form>
    </div>
</div>



<!--alapaca divs -->
<div id="form1"></div>
<div id="data1"></div>
<input type="button" id="form1-button" value="Show YAML">
<input type="button" id="edit-yaml-button" value="Edit YAML">
     
    <script type="text/javascript">

    var doStuff = function() {
		var obj = Alpaca.fieldInstances['alpaca1'];
		yaml = doModalTextArea('edit YAML', json2yaml(obj.getValue()), function(yaml) {obj.setValue(jsyaml.load(yaml))});
		//alert(json2yaml(obj.getValue()));
    };

    $(function() {
    	$("#form1").alpaca({
    		"schema": {
    			"title":"Form One",
    			"type":"object",
    			"properties": {
    				"name": {
    					"type":"string"
    				},
    				"click_for_more": {
    					"type":"boolean"
    				},
    				"want_more": {
    					"type":"select",
    					"enum":['show me an object array','other option 1', 'other option 2', 'alpaca built my hotrod']
    				},
				"sub_object_single": {
					"type":"object",
					"properties": {
    						"so_bool": {
    							"type":"boolean"
    						},
						"so_item_1": {
							"type":"string",
							dependencies : 'so_bool'
						},
						"so_item_2": {
							"type":"string"
						}
					},
					dependencies : ["click_for_more"]
				},
				"sub_string_array": {
					"type":"array",
					"items": {
						"type":"string"
					},
					default : ['']
				},
				"sub_object_array": {
					"type":"array",
					"items": {
						"type":"object",
						"properties": {
							"so_item_1": {
								"type":"string"
							},
							"so_item_2": {
								"type":"string"
							}
						}
    					},
					dependencies : ["want_more"]
				}
			}
    		},
		"options": {
			"fields": {
				"name": {
					"hidden": false,
					"placeholder": "Type something...",
					"helper" : "this is a useful description"
				},
				"sub_string_array": {
					"fields" : {
						"item" : {
							"placeholder": "Type something..."
						}
					}
				},
				"sub_object_single" : {
					"fields" : {
						"so_item_1" :{
							dependencies : {
								"so_bool" : true
							},
							placeholder : "Type something..."
						}
					},
					dependencies : {
						"click_for_more": true
					}
				},
				"sub_object_array" : {
					"dependencies" : {
						"want_more" : "show me an object array"
					}
				}
			}
		},
		"view": "VIEW_WEB_EDIT_YAML",
		"postRender": function(renderedForm) {
			$('#form1-button').click(function() {
				var msg = json2yaml($("#form1").alpaca().getValue());
				alert(msg);
			});
			$('#edit-yaml-button').click(function() {
				doStuff();
			});
		}
    	});
    });
    </script>

<script type="text/javascript">
var panel;
var doOk;

var doModalTextArea = function(title, data, processText) {
	YUI().use('panel', function (Y) {
       		panel.setStdModContent(Y.WidgetStdMod.HEADER, title);
		Y.one('#modalTextAreaPanelContent')._node.style.display = "";
		Y.one('#modalTextAreaPanelYAML')._node.value = data;
		panel.show();
		doOK = function() {
			yaml = Y.one('#modalTextAreaPanelYAML')._node.value;
			processText(yaml);
		};
	});
}

YUI().use('panel', function (Y) {

    // Create the main modal form.
    panel = new Y.Panel({
        srcNode      : '#modalTextAreaPanelContent',
        headerContent: 'Edit YAML',
        zIndex       : 5,
        centered     : true,
        modal        : true,
        visible      : false,
        render       : true,
        plugins      : [Y.Plugin.Drag]
    });

    panel.addButton({
        value  : 'OK',
        section: Y.WidgetStdMod.FOOTER,
        action : function (e) {
            e.preventDefault();
            doOK();
	    panel.hide();
        }
    });

    panel.addButton({
        value  : 'Cancel',
        section: Y.WidgetStdMod.FOOTER,
        action : function (e) {
            e.preventDefault();
	    panel.hide();
        }
    });

});


</script>

</body>
</html>



